<template>
  <div class="home-container">
    <!-- 群信息头部 -->
    <div class="group-header">
      <img src="./img/a619a3d6215d5196f55428a854a5c18618ec44a7bea1fea0039ed37edaa546ad.jpeg" alt="二维码图片" width="110" height="120" />
      <div class="group-name">王者荣耀交流群</div>
      <div class="group-stats">成员 {{ groupInfo.memberCount }} 人 · 2023-05-01创建</div>
    </div>

    <!-- 成员列表 -->
    <div class="members-section">
      <h3>群成员</h3>
      <div class="members-list">
        <div class="member-item" v-for="(member, index) in members" :key="index">
          <div class="member-avatar">
            <img :src="member.avatar" :alt="member.name">
          </div>
          <div class="member-info">
            <div class="member-name">
              {{ member.name }}
              <span v-if="member.role" class="member-role">{{ member.role }}</span>
            </div>
            <div class="join-time">加入时间: {{ member.joinTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 群介绍 -->
    <div class="group-intro">
      <h3>群介绍</h3>
      <p>本群是优质王者开黑群，下单拉你进群，后续新群都可以免费进，群内24小时活跃。</p>
      <p>进群请先支付3.99元群费，感谢您的支持！</p>
    </div>

    <!-- 底部支付按钮 -->
    <div class="bottom-payment">
      <button class="payment-btn" @click="goTopayment">立即支付群费</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      // 组件内部数据
    }
  },
  computed: {
    ...mapState([
      'members',
      'groupInfo'
    ])
  },
  methods: {
    ...mapActions([
      'fetchMembers'
    ]),
    goTopayment() {
      // 传递群信息和支付金额到支付页面
      this.$router.push({
        path: '/payment',
        query: {
          groupName: this.groupInfo.name || '王者荣耀交流群',
          amount: 5, // 群费金额5元
          groupId: this.groupInfo.id || 'default-group-id'
        }
      })
    }
  },
  mounted() {
    // 页面加载时获取数据
    this.fetchMembers()
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.group-header {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center; /* 添加居中样式 */
}

.group-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.group-stats {
  font-size: 14px;
  color: #666;
}

.members-section,
.group-intro {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.members-section h3,
.group-intro h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
  font-size: 18px;
}

.members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.member-item {
  display: flex;
  align-items: center;
  width: calc(50% - 8px);
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.member-role {
  font-size: 12px;
  color: #fff;
  background-color: #1989fa;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.join-time {
  font-size: 12px;
  color: #999;
}

.group-intro p {
  margin: 10px 0;
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

.bottom-payment {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.payment-btn {
  width: 100%;
  padding: 15px;
  background-color: #1989fa;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.payment-btn:hover {
  background-color: #0e77d3;
}
</style>